<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品标题</th>
    <th>商品价格</th>
    <th>商品销量</th>
  </tr>
  <script>
    let p1 = {};
    p1.name="张三";
    p1.age=20;
    p1.run = function () {
      console.log(this.name+":"+this.age);
    }
    p1.run();

    let p2 = {
      name:"李四",
      age:22,
      run:function () {
        console.log(this.name+":"+this.age)
      }
    }
    p2.run();

    //将多个信息封装到一个对象中
    let arr = [{title:"小米手机",price:5000,saleCount:200},
      {title:"李宁篮球鞋",price:500,saleCount:100},
      {title:"华为电视",price:4000,saleCount:20},
      {title:"苹果14pro max",price:10000,saleCount:2}];
    let table = document.querySelector("table");
    for (let product of arr) {
      let tr = document.createElement("tr");
      let titleTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let saleCountTd = document.createElement("td");
      titleTd.innerText = product.title;
      priceTd.innerText = product.price;
      saleCountTd.innerText = product.saleCount;
      tr.append(titleTd,priceTd,saleCountTd);
      table.append(tr);


    }

  </script>
</table>

</body>
</html>